import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
import Login from './components/Login';
import PatientInfo from './components/PatientInfo';
import Profile from './components/Profile';
import ImagingInfo from './components/ImagingInfo';
import Register from './components/Register';
import { Layout, Menu, Button, theme } from 'antd';
import {
  UserOutlined,
  TeamOutlined,
  LogoutOutlined,
  FileImageOutlined,
} from '@ant-design/icons';

const { Header, Content, Sider } = Layout;

// 权限校验高阶组件
function RequireAuth({ children }) {
  const token = localStorage.getItem('token');
  const location = useLocation();
  if (!token) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
}

const MainLayout = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const handleLogout = () => {
    localStorage.removeItem('token');
    navigate('/login');
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'space-between',
        background: colorBgContainer,
        padding: '0 24px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <h1 style={{ margin: 0, color: '#1890ff' }}>卒中诊断系统</h1>
        <Button 
          type="text" 
          icon={<LogoutOutlined />} 
          onClick={handleLogout}
        >
          退出登录
        </Button>
      </Header>
      <Layout>
        <Sider 
          collapsible 
          collapsed={collapsed} 
          onCollapse={setCollapsed}
          style={{ background: colorBgContainer }}
        >
          <Menu
            mode="inline"
            selectedKeys={[location.pathname]}
            style={{ height: '100%', borderRight: 0 }}
            items={[
              {
                key: '/dashboard',
                icon: <TeamOutlined />,
                label: '患者管理',
                onClick: () => navigate('/dashboard'),
              },
              {
                key: '/imaging',
                icon: <FileImageOutlined />,
                label: '影像信息管理',
                onClick: () => navigate('/imaging'),
              },
              {
                key: '/profile',
                icon: <UserOutlined />,
                label: '个人中心',
                onClick: () => navigate('/profile'),
              },
            ]}
          />
        </Sider>
        <Layout style={{ padding: '24px' }}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: '4px',
            }}
          >
            <Routes>
              <Route path="/dashboard" element={<PatientInfo />} />
              <Route path="/imaging" element={<ImagingInfo />} />
              <Route path="/profile" element={<Profile />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/*" element={
          <RequireAuth>
            <MainLayout />
          </RequireAuth>
        } />
        <Route path="/" element={<Navigate to="/login" replace />} />
      </Routes>
    </Router>
  );
};

export default App; 